<template>
  <div class="container">
    <el-card class="body">
      <el-row type="flex" justify="end">
        <el-button class="add-btn" type="success" icon="el-icon-edit" @click="toRouter()"
          >新增试题</el-button
        >
      </el-row>
      <el-form
        ref="elForm"
        :model="formData"
        size="medium"
        label-width="78px"
        label-position="left"
      >
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="学科" prop="lable">
              <el-select
                @change="subjectChange()"
                v-model="formData.subjectID"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in lableOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                v-model="formData.catalogID"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                @change="twoLevelDirectoryChange()"
              >
                <el-option
                  v-for="(item, index) in twoLevelDirectoryOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select
                v-model="formData.tags"
                placeholder="请选择标签"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in tagsOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                v-model="formData.keyword"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select
                v-model="formData.questionType"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in questionTypeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                v-model="formData.difficulty"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in difficultyOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                v-model="formData.direction"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in directionOptions"
                  :key="index"
                  :label="item"
                  :value="item"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                v-model="formData.creatorID"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                @focus="getusersSimple()"
              >
                <el-option
                  v-for="item in creatorIDOptions"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input
                v-model="formData.remarks"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input
                v-model="formData.shortName"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-row type="flex" :gutter="4">
                <el-col :span="12">
                  <el-select
                    class="city"
                    v-model="formData.province"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                    @change="getcityOptions"
                    @focus="getprovinces"
                  >
                    <el-option
                      v-for="(item, index) in provinceOptions"
                      :key="index"
                      :label="item"
                      :value="item"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-select
                    class="city"
                    v-model="formData.city"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in cityOptions"
                      :key="index"
                      :label="item"
                      :value="item"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-col> </el-row
            ></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="large">
              <el-button @click="resetForm">清除</el-button>
              <el-button type="primary" @click="submitForm">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 学科列表 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="全部" name="first">
          <el-alert
            :title="`数据一共${tableData.length}条`"
            type="info"
            show-icon
          >
          </el-alert>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column
              prop="questionType"
              :formatter="formQuestionType"
              label="题型"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template slot-scope="scope">{{
                scope.row.addDate | filterTime
              }}</template>
            </el-table-column>
            <el-table-column
              prop="difficulty"
              :formatter="formDifficulty"
              label="难度"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column
              prop="chkState"
              :formatter="formChkType"
              label="审核状态"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column
              prop="publishState"
              :formatter="formPublishType"
              label="发布状态"
              width="120"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewBtn(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="clickBtn(scope.row.id)"
                  :disabled="!(scope.row.chkState == 0)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="toRouterById(scope.row.id)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="publishBtn(scope.row)"
                  >{{
                    tableData.publishState == 1 ? "下架" : "上架"
                  }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == 1"
                  @click="delBtn(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <el-alert
            :title="`数据一共${tableDataTodo.length}条`"
            type="info"
            show-icon
          >
          </el-alert>
          <el-table :data="tableDataTodo" border style="width: 100%">
            <el-table-column fixed prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column
              prop="questionType"
              :formatter="formQuestionType"
              label="题型"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template slot-scope="scope">{{
                scope.row.addDate | filterTime
              }}</template>
            </el-table-column>
            <el-table-column
              prop="difficulty"
              :formatter="formDifficulty"
              label="难度"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column
              prop="chkState"
              :formatter="formChkType"
              label="审核状态"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column
              prop="publishState"
              :formatter="formPublishType"
              label="发布状态"
              width="120"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewBtn(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="clickBtn(scope.row.id)"
                  :disabled="!(scope.row.chkState == 0)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="toRouterById(scope.row.id)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="publishBtn(scope.row)"
                  >{{
                    tableData.publishState == 1 ? "下架" : "上架"
                  }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == 1"
                  @click="delBtn(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <el-alert
            :title="`数据一共${tableDataDone.length}条`"
            type="info"
            show-icon
          >
          </el-alert>
          <el-table :data="tableDataDone" border style="width: 100%">
            <el-table-column fixed prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column
              prop="questionType"
              :formatter="formQuestionType"
              label="题型"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template slot-scope="scope">{{
                scope.row.addDate | filterTime
              }}</template>
            </el-table-column>
            <el-table-column
              prop="difficulty"
              :formatter="formDifficulty"
              label="难度"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column
              prop="chkState"
              :formatter="formChkType"
              label="审核状态"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column
              prop="publishState"
              :formatter="formPublishType"
              label="发布状态"
              width="120"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewBtn(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="clickBtn(scope.row.id)"
                  :disabled="!(scope.row.chkState == 0)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="toRouterById(scope.row.id)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="publishBtn(scope.row)"
                  >{{
                    tableData.publishState == 1 ? "下架" : "上架"
                  }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == 1"
                  @click="delBtn(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <el-alert
            :title="`数据一共${tableDataNo.length}条`"
            type="info"
            show-icon
          >
          </el-alert>
          <el-table :data="tableDataNo" border style="width: 100%">
            <el-table-column fixed prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column
              prop="questionType"
              :formatter="formQuestionType"
              label="题型"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template slot-scope="scope">{{
                scope.row.addDate | filterTime
              }}</template>
            </el-table-column>
            <el-table-column
              prop="difficulty"
              :formatter="formDifficulty"
              label="难度"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column
              prop="chkState"
              :formatter="formChkType"
              label="审核状态"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column
              prop="publishState"
              :formatter="formPublishType"
              label="发布状态"
              width="120"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewBtn(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="clickBtn(scope.row.id)"
                  :disabled="!(scope.row.chkState == 0)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="toRouterById(scope.row.id)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="publishBtn(scope.row)"
                  >{{
                    tableData.publishState == 1 ? "下架" : "上架"
                  }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == 1"
                  @click="delBtn(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          style="float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="curPage.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 题目审核弹出框 -->
    <QuestionCheck
      :dialogVisible.sync="dialogVisible"
      :id="id"
      @check="check"
    ></QuestionCheck>
    <!-- 试题预览 -->
    <QuestionsPreview
      :showDialog.sync="showDialog"
      :questionType="previewType"
      :previewData="previewData"
    ></QuestionsPreview>
  </div>
</template>

<script>
import QuestionsPreview from '../components/questions-preview'
import QuestionCheck from '../components/questions-check'
import { simple as subjectsimple } from '@/api/hmmm/subjects'
import { choice, choiceCheck, choiceAdd, choicePublish, detail } from '@/api/hmmm/questions'
import { simple as levelSimple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { simple as usersSimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { parseTimeByString } from '@/filters/index'
import { questionType, difficulty, direction, chkType, publishType } from '@/api/hmmm/constants.js' // 导入试题类型\难度\方向列表
export default {
  data () {
    return {
      previewData: {},
      previewType: '',
      showDialog: false,
      // 数据id
      id: null,
      dialogVisible: false,
      formData: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      // 分页
      curPage: {
        page: 1,
        pagesize: 3
      },
      // 全部
      tableData: [],
      total: 0,
      // tab栏默认选中
      activeName: 'first',
      // 学科下拉框列表
      lableOptions: [],
      // 二级目录下拉列表
      twoLevelDirectoryOptions: [],
      // 标签下拉列表
      tagsOptions: [],
      // 试题类型下拉框
      questionTypeOptions: questionType,
      // 难度下拉框
      difficultyOptions: difficulty,
      // 方向下拉框
      directionOptions: direction,
      // 录入人下拉框
      creatorIDOptions: [],
      // 所有城市
      provinceOptions: [],
      // 城市下地区
      cityOptions: []
    }
  },
  components: { QuestionCheck, QuestionsPreview },
  computed: {
    // 待审核
    tableDataTodo () {
      return this.tableData.filter(e => e.chkState === 0)
    },
    // 已审核
    tableDataDone () {
      return this.tableData.filter(e => e.chkState === 1)
    },
    // 拒绝
    tableDataNo () {
      return this.tableData.filter(e => e.chkState === 2)
    }
  },
  filters: {
    // 时间过滤器
    filterTime: function (text) {
      var jsondate = new Date(text).toJSON()
      return new Date(new Date(jsondate) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
  },
  methods: {
    // 点击预览
    async previewBtn (row) {
      const { data } = await detail(row)
      this.previewData = data
      this.previewType = data.questionType
      this.showDialog = true
    },
    // 上架 下架
    async publishBtn (row) {
      await this.$confirm(`确定要${row.publishState === 1 ? '下架' : '上架'}吗？`)
      await choicePublish({ id: row.id, publishState: row.publishState })
      // 重新渲染页面
      this.choice()
    },
    // 删除试题
    async delBtn (id) {
      await this.$confirm('确定删除吗')
      await choiceAdd({ id: id, choiceState: 0 })
      // 重新渲染页面
      this.choice()
    },
    // 点击审核
    clickBtn (id) {
      this.dialogVisible = true
      this.id = id
    },
    // 点击审核的确定
    async check (data) {
      await choiceCheck({ id: this.id, ...data })
      // 重新渲染页面
      this.choice()
    },
    // 点击新增跳转页面
    toRouter () {
      this.$router.push('new')
    },
    // 点击修改跳转页面
    toRouterById (id) {
      this.$router.push(`new?id=${id}`)
    },
    // 录入时间
    parseTimeByString () {
      for (const e in this.tableData) {
        return parseTimeByString(e.addDate)
      }
      // return this.tableData.forEach(e => parseTimeByString(e.addDate))
    },
    // 难度
    formDifficulty (row, column, celValue, index) {
      return difficulty.find(item => item.value === +celValue).label
    },
    // 题型
    formQuestionType (row, column, celValue, index) {
      return questionType.find(item => item.value === +celValue).label
    },
    // 审核状态
    formChkType (row, column, celValue, index) {
      return chkType.find(item => item.value === celValue + 1).label
    },
    // 发布状态
    formPublishType (row, column, celValue, index) {
      return publishType.find(item => item.value === +celValue + 1).label
    },
    // 搜索
    submitForm () {
      this.$refs.elForm.validate(async valid => {
        if (!valid) return
        let query = null
        if (this.formData.subjectID !== '') {
          query = this.formData
        }
        // TODO 提交表单
        const { data: { items } } = await choice(query)
        // this.tableData = []
        this.tableData = items
      })
    },
    // 重置表单
    resetForm () {
      this.$refs.elForm.resetFields()
      this.formData = {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      }
      // 获取全部列表
      this.choice()
    },
    // 学科下拉框选择改变时触发
    async subjectChange () {
      console.log(this.tableData)
      const { data } = await levelSimple({ subjectID: this.formData.subjectID })
      this.twoLevelDirectoryOptions = data
    },
    // 二级目录下拉框选择改变时触发
    async twoLevelDirectoryChange () {
      const { data } = await tagsSimple({ subjectID: this.formData.catalogID })
      this.tagsOptions = data
    },
    // 录用人下拉框获得焦点时
    async getusersSimple () {
      const { data } = await usersSimple(this.formData.keyword)
      this.creatorIDOptions = data
    },
    // 获取所有城市
    getprovinces () {
      this.provinceOptions = provinces()
    },
    // 获取城市下地区列表
    getcityOptions () {
      this.cityOptions = citys(this.formData.province)
    },
    // 切换页容量事件
    handleSizeChange (val) {
      this.curPage.pagesize = val
      this.choice()
    },
    // 跳转页
    handleCurrentChange (val) {
      this.curPage.page = val
      this.choice()
    },
    // 获取精选题库列表
    async choice () {
      const { data: res } = await choice(this.curPage)
      this.total = res.counts
      this.tableData = res.items
      if (res.page > res.pages) {
        this.handleCurrentChange(+res.pages)
      }
    },
    // 获取学科简单列表
    async subjectsimple () {
      const { data } = await subjectsimple()
      this.lableOptions = data
    }
  },
  created () {
    this.subjectsimple()
    this.choice()
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px;
  .add-btn {
    width: 120px;
    height: 40px;
  }
  .el-row {
    margin-bottom: 5px;
    height: 50px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
    margin-right: 0;
    .city {
      width: 150px;
    }
  }
}
</style>
